<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>外轮廓</title>
		<style>
			
			div.sb {
				width: 200px;
				height: 200px;
				background-color: skyblue;
			}

			.red {
				width: 200px;
				height: 200px;
				background-color: red;
				margin-left: 50px;
				/* 外轮廓的宽度 */
				/*outline-width: 20px;*/
				/*
					solid: 实线;
					dotted: 点线;
					dashed: 虚线;
					double: 双实线;
					groove: 3d凹槽;
					ridge: 3d凸槽;
					inset: 3d凹边;
					outset: 3d凸边;
				*/
				/*outline-style: inset;*/
				/*outline-color: rgba(255, 255, 0, 1);*/

				/* 
					外轮廓并不占用位置 
					宽度  样式 颜色
				*/
				outline: 20px solid gold;
			}

		</style>
	</head>
	<body>

		<div class="sb"></div>
		<div class="red"></div>
		
	</body>
</html>